<template>
    <div class="userSta">
        <div class="user_type_statistical">
            <div class="registered_user half">
                <div class="title_box">
                    <div class="title">用户类型统计</div>
                    <el-date-picker
                        v-model="valueTime0"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="changeDate(0)"
                    ></el-date-picker>
                </div>

                <div id="typeUser_statistical"></div>
            </div>

            <div class="registered_user half">
                <div class="title_box">
                    <div class="title">用户行业统计</div>
                    <el-date-picker
                        v-model="valueTime1"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="changeDate(1)"
                    ></el-date-picker>
                </div>

                <div id="industryUser_statistical"></div>
            </div>
        </div>
        <div class="all_user">
            <div class="registered_user all">
                <div class="title_box">
                    <div class="title">注册用户统计</div>
                    <el-date-picker
                        v-model="valueTime2"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="changeDate(2)"
                    ></el-date-picker>
                </div>

                <div id="allUser_statistical"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { userReg, userIndustry, userType } from 'S/userSta';
import { resizeListener } from 'U/echartResize';
export default {
    name: 'userSta',
    components: {},
    data() {
        return {
            valueTime0: '', // 类型时间
            valueTime1: '', // 行业时间
            valueTime2: '', // 总得时间
            all_option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        return '类型：' + params[0].name + '<br/>数量：' + params[0].value;
                    }
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: true,
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    z: 10,
                },
                yAxis: {
                    type: 'category',
                    data: [1, 2, 3, 4],
                },
                dataZoom: [
                    {
                        type: 'inside',
                    },
                ],
                series: [
                    {
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                color: '#FE8D1B',
                                label: {
                                    show: true, position: 'top'
                                }
                            }
                        },
                        data: [1, 2, 3, 4],
                    },
                ],
            },
            type_option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        return '日期：' + params[0].name + '<br/>数量：' + params[0].value;
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLabel: { interval: 0, rotate: -30 },
                        data: [1, 2, 3, 4]
                    }
                ],
                yAxis: {
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999',
                        },
                    },
                },
                dataZoom: [
                    {
                        type: 'inside',
                    },
                ],
                series: [
                    {
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                color: '#FE8D1B',
                                label: {
                                    show: true, position: 'top'
                                }
                            }
                        },
                        data: [],
                    },
                ],
            },
            industry_option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        return '类型：' + params[0].name + '<br/>数量：' + params[0].value;
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLabel: { interval: 0 },
                        data: [1, 2, 3, 4]
                    }
                ],
                yAxis: {
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999',
                        },
                    },
                },
                dataZoom: [
                    {
                        type: 'inside',
                    },
                ],
                series: [
                    {
                        type: 'bar',
                        barCategoryGap: '50%',
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                color: '#FE8D1B',
                                label: {
                                    show: true, position: 'top'
                                }
                            }
                        },
                        data: [5, 6, 7, 8],
                    },
                ],
            },
        };
    },
    mounted() {
        this.initData(0);
        this.initData(1);
        this.initData(2);
    },
    methods: {
        async initData(timeCode, time) {
            let param = {};
            if (time) {
                param = { startTime: time[0], endTime: time[1] };
            }
            if (timeCode === 0) {
                let res = await userReg(param);
                if (res.status === 200) {
                    let x = this.getVal(res.data, 'to_char');
                    let y = this.getVal(res.data, 'count');
                    this.type_option.xAxis[0].data = [];
                    this.type_option.series[0].data = [];
                    this.type_option.xAxis[0].data.push(...x);
                    this.type_option.series[0].data.push(...y);
                    this.myChat0 = this.$echarts.init(document.getElementById('typeUser_statistical'));
                    this.myChat0.setOption(this.type_option);
                    resizeListener(this.myChat0);
                }
            } else if (timeCode === 1) {
                let res = await userIndustry(param);
                if (res.status === 200) {
                    let x = this.getVal(res.data, 'name');
                    let y = this.getVal(res.data, 'count');
                    this.industry_option.xAxis[0].data = [];
                    this.industry_option.series[0].data = [];
                    this.industry_option.xAxis[0].data.push(...x);
                    this.industry_option.series[0].data.push(...y);
                    this.myChat1 = this.$echarts.init(document.getElementById('industryUser_statistical'));
                    this.myChat1.setOption(this.industry_option);
                    resizeListener(this.myChat1);
                }
            } else {
                let res = await userType(param);
                if (res.status === 200) {
                    let x = this.getVal(res.data, 'name');
                    let y = this.getVal(res.data, 'count');
                    this.all_option.yAxis.data = [];
                    this.all_option.series[0].data = [];
                    this.all_option.yAxis.data.push(...x);
                    this.all_option.series[0].data.push(...y);
                    this.myChat2 = this.$echarts.init(document.getElementById('allUser_statistical'));
                    this.myChat2.setOption(this.all_option);
                    resizeListener(this.myChat2);
                }
            }
        },
        changeDate(code) {
            this.initData(code, this['valueTime' + code]);
        },
        getVal(arr, key) {
            return arr.map(item => item[key]);
        },
    },
    beforeDestroy() {
        if (this.myChat0) {
            this.myChat0.dispose();
        }
        if (this.myChat1) {
            this.myChat1.dispose();
        }
        if (this.myChat2) {
            this.myChat2.dispose();
        }
    }
};
</script>
<style lang="scss">
.userSta {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .user_type_statistical {
    }
    .all_user {
        height: 50%;
    }
    .registered_user {
        height: 420px;
        border: 1px solid #e3e3e3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .title_box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 70px;
            margin-top: 10px;
            .title {
                font-size: 24px;
                color: #030e39;
            }
        }
        #typeUser_statistical {
            width: 100%;
            height: 340px;
        }
        #industryUser_statistical {
            width: 100%;
            height: 340px;
        }
        #allUser_statistical {
            width: 100%;
            height: 340px;
        }
    }
    .half {
        width: 48%;
        float: left;
        margin-left: 1%;
    }
    .all {
        width: 97%;
        margin-left: 1%;
        margin-top: 14px;
    }
}
</style>
